import React from 'react';
import Swiper from 'swiper/bundle';
import {lazyImg } from '../../assets/js/utils';
import Css from '../../assets/css/index/index.css';

function Hoc(WithComponent) {
    return class hocComponent extends React.Component{
        constructor(){
            super();
            this.state={

            }
            this.bannerSwiper='';
        }
        componentDidMount(){
            setTimeout(()=>{
                this.banSwiper();
                this.proSwiper();
                this.servSwiper();
                this.echo();
            },200)

        }

        //懒加载
        echo(){
            lazyImg()
        }
        // banner切换
        banSwiper(){
            new Swiper('.banSwiper', {
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                watchOverflow: true,//因为仅有1个slide，swiper无效
                direction: 'vertical',
                loop: true,
                preloadImages: false,
                slideActiveClass : Css['active'],
                lazy: {
                    preloaderClass:'Loading',
                    loadPrevNext:true
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    bulletClass : Css['my-bullet'],//需设置.my-bullet样式
                    bulletActiveClass: Css['my-bullet-active'],
                    bulletElement : 'li',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        }
        //产品切换
        proSwiper(index='0'){
            this.bannerSwiper = new Swiper('#gallery',{
                spaceBetween: 10,
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                lazy: {
                    preloaderClass:'Loading',
                    loadPrevNext:true
                },
                slideActiveClass : Css['active'],
                runCallbacksOnInit : false,
                thumbs: {
                    swiper: {
                        el: '#thumbs',
                        spaceBetween: 10,
                        slidesPerView: 4,
                        watchSlidesVisibility: true,
                        allowSlideNext : false,
                        allowSlidePrev : false,
                    },
                    slideThumbActiveClass: Css['active'],
                },
            })

        }
        onMouseEnter(index){
            this.bannerSwiper.slideTo(index, 100,false);
        }
        //服务客户
        servSwiper(){
           new Swiper('.indCliSwiper2', {
                slidesPerView: 6,
                spaceBetween: 60,
                freeMode: true,
                slidesPerGroup : 3,
                loop:true,
                lazy: {
                    preloaderClass: 'Loading',
                    loadPrevNext:true
                },
                pagination: {
                    el: '.indCliSwiperSagination',
                    clickable: true,
                    bulletClass : Css['indCliAullet'],//需设置.my-bullet样式
                    bulletActiveClass: Css['indCliBulletActive'],
                },
                navigation: {
                    nextEl: '.indCliSwiperNext',
                    prevEl: '.indCliSwiperPrev',
                },
            });
            new Swiper('.indCliSwiper3', {
                slidesPerView: 6,
                spaceBetween: 60,
                freeMode: true,
                slidesPerGroup : 3,
                loop:true,
                lazy: {
                    preloaderClass: 'Loading',
                    loadPrevNext:true
                },
                pagination: {
                    el: '.indCliSwiperSagination',
                    clickable: true,
                    bulletClass : Css['indCliAullet'],//需设置.my-bullet样式
                    bulletActiveClass: Css['indCliBulletActive'],
                },
                navigation: {
                    nextEl: '.indCliSwiperNext',
                    prevEl: '.indCliSwiperPrev',
                },
            });
        }
        //点击跳转页面
        goPages(url){
            let strUrl= "^(://)" +
                "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" +//ftp的user@+
                "(([0-9]{1,3}.){3}[0-9]{1,3}" +// IP形式的URL- 199.194.52.184 +
                "|" +// 允许IP和DOMAIN（域名） +
                "([0-9a-z_!~*'()-]+.)*" +// 域名- www. +
                "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." +// 二级域名 +
                "[a-z]{0,6})" +// first level domain- .com or .museum +
                "(:[0-9]{1,4})?" +// 端口- :80 +
                "((/?)|"  +// a slash isn't required if there is no file name +
                "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
            let reg = new RegExp(strUrl);
            if (!reg.test(url)){
                window.open(url)
            }else {
                this.props.props.props.history.push(window.base.config.path+url)
            }
        }
        //页面离开时销毁产品swiper
        componentWillUnmount(){
            if(this.bannerSwiper){
                this.bannerSwiper.destroy()
            }
        }
        render(){
            let newProps={
                goPages:this.goPages.bind(this),
                onMouseEnter:this.onMouseEnter.bind(this),
            }
            return(
                <WithComponent {...this.props} {...newProps}></WithComponent>
            )
        }
    }
}
export default Hoc